<template>
	<div id="afterserver">
		<div class="service-box">
			<div class="astitle">
				宅寂官网
			</div>
			<div class="astitlekf">
				宅寂-麦兜
			</div>
			<div style="position: absolute;width:100%;height:2rem;padding:.1rem;overflow: auto;">
					<p style="padding:0;margin:0;color:#555;text-align:center;">{{date}}</p>
				<div v-for="i in kflist">
					<div class="imgkefu"><img style="width:.37rem;height:.4rem" :src="require('../../assets/img/service/kefu.png')" alt=""></div>
						<div class="text">
							{{i}}
						</div>
						<div style="clear: both;width:0px;height:0;"></div>
				</div>
				<div v-for="i in list">
					<div class="imgwe"><img style="width:.37rem;height:.4rem" :src="require('../../assets/img/service/kefu.png')" alt=""></div>
						<div class="textwe">
							{{i}}
						</div>
						<div style="clear: both;width:0px;height:0;"></div>
				</div>
			</div>	
			<div class="wx">
				<img style="width:.24rem;height:.24rem;position:absolute;top:0.05rem;left:.2rem" :src="require('../../assets/img/service/wx.png')" alt="">
			</div>
			<div class="input">
				<textarea v-model="text" style="width:4.5rem;height:.82rem;resize:none;background-color:#EBEBEB;border:none;border-radius:5px;outline: none;" placeholder="请输入内容">
			
				</textarea>
			</div>
			<div class="fs" :class="{act:act}" @click="fs">
				发送
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				text:"",
				act:false,
				kflist:["您好，欢迎进入宅寂家居，很高兴为您服务！等候期间，您也可以拨打全国客服热线47887900进行咨询，我们将竭诚为您服务"],
				list:[],
				date:""
			}
		},
		mounted(){
			let data=new Date();
			this.date=data.getHours()+":"+data.getMinutes()+":"+data.getSeconds();
		},
		methods:{
			fs(){
				if(this.act){
					this.list.push(this.text)
					this.text="";
				}
			}
		},
		watch:{
			text(v){
				if(v.length>0){
					this.act=true
				}else{
					this.act=false;
				}
			}
		}
	}
</script>
<style scoped>
	#afterserver{
		width:19.2rem;
		height:9rem;
		background-image: url("../../assets/img/service/1.jpg");
		font-size:.16rem;
	}
	.service-box{
		position: absolute;
		top:1.92rem;
		left:8.1rem;
		width:5.7rem;
		height:4.9rem;
		background-color:#fff;
	}
	.astitle{
		height:.6rem;
		background-color:#DECEB9;
		font-size:.24rem;
		line-height:.6rem;
		text-align:center
	}
	.astitlekf{
		height:.34rem;
		padding-left:.2rem;
		line-height:.34rem;
		background-color:#E6DDD1;
		}
	.imgkefu{
		float: left;
	}
	.imgwe{
		float: right;
	}
	.textwe{
		padding:0 .1rem;
		background-color:#EBEBEB;
		float:right;
		margin-top:0.1rem;
		margin-right:.05rem;
		max-width:4.5rem;
		border-radius:5px;
		font-size:0.14rem;
		line-height:.3rem;
	}
	.text{
		margin-top:0.1rem;
		margin-left:.05rem;
		float: left;
		font-size:0.14rem;
		width:4.5rem;
		height:.6rem;
		line-height:.3rem;
		background-color:#EBEBEB;
		padding:0 .05rem;
		border-radius:5px;
	}
	.wx{
		position:absolute;
		top:3rem;
		height:.34rem;
		width:100%;
		background-color:#E6DDD1;
	}
	.input{
		position:absolute;
		top:3.53rem;
		left:.63rem;
		
		outline: 0;
		
	}
	.fs{
		width:.86rem;
		height:.3rem;
		line-height:.3rem;
		text-align: center;
		background-color:#EBEBEB;
		border-radius:5px;
		position: absolute;
		top:4.5rem;
		left:4.25rem;
		cursor: not-allowed;
	}
	.act{
		background-color:#070;
		color:#fff;
		cursor: pointer;
	}
		
</style>